import {Component, OnInit, Input, OnChanges, ViewChild, OnDestroy} from '@angular/core';
import {NzMessageService} from "ng-zorro-antd";
import {FetchService} from "../../../core/net/fetch.service";
import {DomSanitizer, SafeResourceUrl} from "@angular/platform-browser";
import {format} from "date-fns";
import {NzModalRef} from "ng-zorro-antd/modal";

@Component({
  selector: "app-jrsq-big",
  templateUrl: "./jrsq-big.component.html",
  styleUrls: ["./jrsq-big.component.scss"]
})
export class JrsqBigComponent implements OnInit, OnDestroy {
  tplModal: NzModalRef;
  jrsqData = [];
  updateData = [];
  flatenArr = [];
  timer1;
  timer2;

  constructor(
    private message: NzMessageService,
    private fetchService: FetchService,
    private sanitizer: DomSanitizer
  ) {
  }

  ngOnInit() {
    this.queryInfo();
    this.testGdxg();
  }

  ngOnDestroy(): void {
    window.clearInterval(this.timer1);
    window.clearTimeout(this.timer2);
  }

  queryInfo(): void {
    // 今日水情
    this.fetchService.post<any>('muw/wrsMuwWatReg/list', {}).subscribe(res => {
      const arr = [];
      for (const item of res) {
        const temp = [];
        for (let i = 0; i < 6; i++) {
          if (item[i]) {
            const newit = {...item[i], ...{newflow: item[i].flow}};
            temp.push(newit);
          } else {
            temp.push({name: '', flow: '', newflow: ''});
          }
        }
        arr.push(temp);
      }
      this.jrsqData = arr;
      console.log(this.jrsqData);
    });

  }

  testGdxg(): void {
    this.timer1 = setInterval(() => {
      /*this.sIndex = (this.sIndex + 1) % 5;
      console.log(this.sIndex);*/
      console.log('数据要更新啦');
      this.updateData = [
        [{
          "name": "灌区总引水",
          "id": 1,
          "flow": Math.floor((Math.random() * 100) + 1),
        }, {
          "name": "河西总干渠",
          "id": 2,
          "flow": 0
        }, {
          "name": "河东总干渠",
          "id": 3,
          "flow": Math.floor((Math.random() * 100) + 1),
        }],
        [{
          "name": "西干渠",
          "id": 6,
          "flow": Math.floor((Math.random() * 100) + 1)
        }, {
          "name": "大清渠",
          "id": 9,
          "flow": 1.980
        }, {
          "name": "汉延渠",
          "id": 8,
          "flow": 4.460
        }, {
          "name": "泰民渠",
          "id": 10,
          "flow": 0.834
        }, {
          "name": "唐徕渠",
          "id": 5,
          "flow": 60.700
        }, {
          "name": "惠农渠",
          "id": 7,
          "flow": 41.600
        }],
        [{
          "name": "汉渠",
          "id": 13
        }, {
          "name": "马莲渠",
          "id": 14
        }, {
          "name": "秦渠",
          "id": 12,
          "flow": 23.500
        }, {
          "name": "东干渠",
          "id": 15,
          "flow": 34.900
        }],
        [{
          "name": "北干渠",
          "id": 19,
          "flow": 31.200
        }, {
          "name": "角渠",
          "id": 20,
          "flow": 1.380
        }, {
          "name": "跃进渠",
          "id": 18,
          "flow": 9.470
        }, {
          "name": "寿渠",
          "id": 21,
          "flow": 9.890
        }, {
          "name": "七星渠",
          "id": 17,
          "flow": 49.400
        }],
        [{
          "name": "泉眼山泵站",
          "id": 54,
          "flow": 21.879
        }, {
          "name": "大战场泵站",
          "id": 67,
          "flow": 9.118
        }, {
          "name": "盐环定一泵站",
          "id": 9,
          "flow": 10.359
        }, {
          "name": "固扩",
          "id": 25,
          "flow": 0
        }, {
          "name": "水源泵站",
          "id": 26,
          "flow": 0
        }, {
          "name": "红寺堡",
          "id": 27,
          "flow": 0
        }]
      ];
      this.flatenArr = this.convertToArr(this.updateData);
      this.jrsqData.map(item => {
        item.map(child => {
          // 查询改记录的新值
          const newItem = this.flatenArr.filter(i => i.id == child.id)[0];
          if (newItem) {
            child.flow = child.newflow;
            child.newflow = newItem.flow;
          }
        });
      });
      // 播放完动画就保持新值和老值一致
      this.timer2 = setTimeout(() => {
        this.jrsqData.map(item => {
          item.map(child => {
            child.flow = child.newflow;
          });
        });
        console.log(this.jrsqData);
      }, 5000);
    }, 10000);
  }

  convertToArr(data): any {
    const arr = [];
    data.map(item => {
      if (item.length > 0) {
        item.map(child => {
          arr.push({name: child.name, id: child.id, flow: child.flow});
        });
      }
    });
    return arr;
  }


}
